import React, { Component } from "react";
import "./index.css";
export default class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isshow: "none",
      isshow1: "none",
      nameId: "",
      //添加的数据
      newarr: {
        id: "",
        name: "",
        age: "",
      },
      // 修改的数据
      updown: {
        id: "",
        name: "",
        age: "",
      },
      //查询的数据
      appobj: {
        id: "",
        name: "",
      },
      //表单数据
      employees: [
        {
          id: "01001",
          name: "晶犬",
          age: 18,
        },
        {
          id: "01002",
          name: "晶犬1",
          age: 14,
        },
        {
          id: "01003",
          name: "晶犬2",
          age: 16,
        },
      ],
    };
  }
  //显示添加窗口
  addsup = () => {
    this.setState({
      isshow: "block",
    });
  };
  //取消添加窗口
  hidaadd = () => {
    this.setState({
      isshow: "none",
    });
  };
  //添加值必须...拓展  不然输入的值会覆盖原值
  onChangevalue = (e) => {
    this.setState({
      newarr: {
        ...this.state.newarr,
        [e.target.name]: e.target.value,
      },
    });
  };
  //点击添加数据  原数据拓展后加如新数据
  addarr = () => {
    this.setState({
      employees: [...this.state.employees, this.state.newarr],
    });
    this.hidaadd();
  };
  //删除数据
  spilces = (id) => {
    if (window.confirm("确定删除吗？")) {
      this.setState({
        employees: this.state.employees.filter((item) => item.id !== id),
      });
    }
  };
  //点击显示修改弹窗
  hidder = (id) => {
    this.setState({
      nameId: id,

      isshow1: "block",
      updown: this.state.employees.filter((item) => item.id === id)[0],
    });
  };
  //点击隐藏修改窗口
  hidderupdate = () => {
    this.setState({
      isshow1: "none",
    });
  };
  //点击确认修改
  addUndefDate = () => {
    const idx = this.state.employees.findIndex(
      (item) => item.id === this.state.nameId
    );
    //这里的idx是
    // this.state.employees[idx] = this.state.updown;

    const arr = [...this.state.employees];
    arr[idx] = this.state.updown;
    this.setState({
      employees: arr,
      isshow1: "none",
    });
  };
  //修改窗口双向绑定
  onChangevalueone = (e) => {
    this.setState({
      updown: {
        ...this.state.updown,
        [e.target.name]: e.target.value,
      },
    });
  };
  //查询点击
  Inquire = () => {
    
  }
  //查询双向绑定
  bangding = (e) => {
    this.setState({
      appobj: {
        ...this.state.appobj,
        [e.target.name]:e.target.value
        }
    })
  }
  render() {
    return (
      <div>
        <h1>增删改查</h1>
        <div>
          工号:
          <input
            type="text"
            name="id"
            value={this.state.appobj.id}
            onChange={this.bangding}
          />
          <hr />
          姓名:
          <input
            type="text"
            name="name"
            value={this.state.appobj.name}
            onChange={this.bangding}
          />
          <button className="btn" onClick={this.Inquire}>查询</button>
          <button className="btn" onClick={this.addsup}>
            添加
          </button>
        </div>
        <table>
          <tbody>
            <tr>
              <td>工号</td>
              <td>姓名</td>
              <td>年龄</td>
              <td>操作</td>
            </tr>
            {this.state.employees.map((item) => (
              <tr key={item.id}>
                <td>{item.id}</td>
                <td>{item.name}</td>
                <td>{item.age}</td>
                <td>
                  <input
                    type="button"
                    value="修改"
                    onClick={() => this.hidder(item.id)}
                  />
                  <input
                    type="button"
                    value="删除"
                    onClick={() => this.spilces(item.id)}
                  />
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {/* 添加区域 */}
        <div className="add-box" style={{ display: this.state.isshow }}>
          <h1>添加</h1>
          <p>
            工号：
            <input
              type="text"
              name="id"
              value={this.state.newarr.id}
              onChange={this.onChangevalue}
            />
          </p>
          <p>
            姓名：
            <input
              type="text"
              name="name"
              value={this.state.newarr.name}
              onChange={this.onChangevalue}
            />
          </p>
          <p>
            年龄：
            <input
              type="text"
              name="age"
              value={this.state.newarr.age}
              onChange={this.onChangevalue}
            />
          </p>
          <input type="button" value="添加" onClick={this.addarr} />
          <input type="button" value="取消" onClick={this.hidaadd} />
        </div>
        {/* 修改 */}
        <div className="add-box" style={{ display: this.state.isshow1 }}>
          <h1>修改</h1>
          <p>
            工号：
            <input
              type="text"
              name="id"
              value={this.state.updown.id}
              onChange={this.onChangevalueone}
            />
          </p>
          <p>
            姓名：
            <input
              type="text"
              name="name"
              value={this.state.updown.name}
              onChange={this.onChangevalueone}
            />
          </p>
          <p>
            年龄：
            <input
              type="text"
              name="age"
              value={this.state.updown.age}
              onChange={this.onChangevalueone}
            />
          </p>
          <input type="button" value="保存" onClick={this.addUndefDate} />
          <input type="button" value="取消" onClick={this.hidderupdate} />
        </div>
      </div>
    );
  }
}
